<template>
  <div class="layout">
      <Layout>
          <Layout :style="{ padding: '0 24px 24px' }">
              <Breadcrumb :style="{ margin: '24px 0' }">
                  <BreadcrumbItem>请在这里查看你的已删除箱喔</BreadcrumbItem>
              </Breadcrumb>
              <Content :style="{ padding: '24px', minHeight: '580px', background: '#fff' }">
                
                <div style="float: left;padding-left: 92%;">
                  <Button type="warning" @click="flesh">刷新</Button>
                </div>
                <br>
                  <div v-for="(item,index) in data">
              <PageHeader
                  :breadcrumb-list="breadcrumbList"
                  :tab-list="tabList"
                  :title="item.senderNickname"
                  :logo="icons[index%4].icon"
>
                <template #action>
                    <ButtonGroup>
                        <Button type="primary" @click="showEmail(index,item.emailID)">查看</Button>
                    </ButtonGroup>
                    <Button type="error" @click="recover(item.emailID)">撤销删除</Button>
                                  </template>
                    <template #content>
                        <DescriptionList :col="2">
                            <Description term="发件人">{{ item.sender }}</Description>
                            <Description term="主题：">{{ item.subject }}</Description>
                            <Description term="发送时间：">{{ item.sendTime }}</Description>
                              <!-- <div v-if="">
                              <Rate count="1"  @click="collect(item.flagged,item.emailID)"  v-model="valueHalf1" />
                              </div>
                              <div v-if="item.flagged ==false">
                              <Rate count="1" @click="collect(item.flagged,item.emailID)" v-model="valueHalf2" />
                          </div> -->
                        
                           
                        </DescriptionList>
                    </template>
                  </PageHeader>
                </div>
                <Modal v-model="modal1" draggable scrollable fullscreen footer-hide="true" :mask="false" title="邮件详情">
                  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
              <FormItem label="昵称" prop="sensenderNicknameder">
              <p>{{ formValidate.senderNickname }}</p>
            </FormItem>
            <FormItem label="发件人" prop="sender">
              <p>{{ formValidate.sender }}</p>
            </FormItem>
            <FormItem label="主题" prop="subject">
              <p>{{ formValidate.subject }}</p>
            </FormItem>
            <FormItem prop="file">
           <P>附件：</P>
           <div v-for="(item,index) in filegroup">
           <a @click="download1(filegroup[index])">{{filegroup[index]}}</a>
          </div>
            </FormItem>
            <FormItem>
                </FormItem>
            <FormItem label="正文" prop="content">
             <div v-html="formValidate.content"></div>
            </FormItem>
                  </Form>
             </Modal>

             
            


              </Content>
          </Layout>
      </Layout>
  </div>
</template>
<script>
import {saveAs} from "file-saver"
import { reduce } from 'lodash';
import { resolveComponent } from 'vue';
import global_variable from "@/api/global_variable";
import axios from 'axios';
export default {
  name: 'AdminList',
  data() {
      return {
          modal1:false,
          icons:[
              {
                  icon:"https://img.51miz.com/preview/element/00/01/12/75/E-1127588-A2568E26.jpg"
              },
              {
                  icon:"https://ts1.cn.mm.bing.net/th/id/R-C.c00f51dea7e54cac941d1bf3bf6e3a1e?rik=ptXjLxpXFYclhg&riu=http%3a%2f%2fimg.zcool.cn%2fcommunity%2f01e0e457b32f640000018c1b402bf2.png%401280w_1l_2o_100sh.png&ehk=wckxzJaShk9uKYyV1zqKhbDPkNyrvbTUlWg52K4eX9E%3d&risl=&pid=ImgRaw&r=0"
              },
              {
                  icon:"https://ts1.cn.mm.bing.net/th/id/R-C.ab4acda29b8489d4838e8ca9e41c0783?rik=nF%2f0tE0gsJEunQ&riu=http%3a%2f%2fxinlaos.com%2fpalm%2fstatic%2fhead%2fhead_6.jpg&ehk=BtQA%2bFMkyPgUJAiFwutA3zz%2fjF05mkCr4c4Q4SUfGbo%3d&risl=&pid=ImgRaw&r=0"
              },
              {
                  icon:"https://static.pptstore.net/icons/80/49/fi_7c242d0cc892e9041578_s.png"
              }
          ],
          formValidate: {
              senderNickname:"",
              sender:'',
              subject: '',
              content: ''
              },
              filegroup:[

              ],
             data: [
              // {
                  // sender: "3271127586@qq.com萱",
                  // subject: "冰醋酸出版处骄傲你觉得费尔法奇偶",
                  // content: "冰醋酸出版",
                  // file: "hi.pdf",
                  // sendTime:"",
                  // senderNickname:""
              // }

              ],
              valueHalf1:1,
              valueHalf1:0,
              protocol:"POP3",
              CurrentUser:""
      }
  },
  created(){
    this.getUser();
  },
  methods: { 

    recover(emailID){
      this.$store.dispatch('email/updateEmailState',{"type":"deleted","state":false,"emailID":emailID})
      .then(res => {
        this.$message({
          type: "success",
          message: "成功"
        })
      })
      .catch(error => {
        console.log(error)
       
        this.$message({
          type: "success",
          message: "已删除"
        })
      
       // this.$router.push("/login")
      })
    },
    flesh(){
      location.reload();
    },
   showEmail(index,emailID){
     this.open(index);
   },
   getUser(){
    this.$store.dispatch('user/getCurrentUser',{})
      .then(res => {
        console.log("current user")
        console.log(res)
        if(res.data.CurrentUser!=null){
       this.CurrentUser=res.data.CurrentUser;
       this.getDeleted(this.CurrentUser);
        
      }
      })
      .catch(error => {
        console.log(error)
        this.$message({
          type: "error",
          message: "还未登录"
        })
        this.$router.push("/login")
      })
   },
   getDeleted(currentUser){
    this.$store.dispatch('email/getDeleted',{"account": currentUser})
      .then(res => {
        console.log("后端返回")
        console.log(res)
    //    this.data.push(res.data[0]);
        for(var i=res.data.length-1;i>=0;i=i-1){
      if(res.data[i]===null){
          
      }else{
          this.data.push(res.data[i])
      }
        }
      //  this.data=res.data;
      //   var data=res.data;
      //   for(var i=0;i<data.length;i=i+1){
      //     var messageGroup={
      //         sender: "3271127586@qq.com萱",
      //         subject: "冰醋酸出版处骄傲你觉得费尔法奇偶",
      //         content: "冰醋酸出版",
      //         attachment:[],
      //         sendTime:null,
      //         senderNickname:""
      //     };
      //     messageGroup.sender=data[i].sender;
      //     messageGroup.subject=data[i].subject;
      //     messageGroup.content=data[i].content;
      //     messageGroup.sendTime=data[i].sendTime;
      //     messageGroup.attachment=data[i].attachment;
      //     messageGroup.senderNickname=data[i].senderNickname;

      //     this.data.push(messageGroup);
      //   }
      //   this.$message({
      //     type: "success",
      //     message: "发送成功"
      //   })
      })
      .catch(error => {
        console.log(error)
        this.$message({
          type: "error",
          message: "失败"
        })
      })
   },
   open(index){
    this.formValidate=this.data[index];
      const filenames =  this.formValidate.attachmentName;
      this.filegroup=filenames.split("?");
      console.log("fienames",filenames);
      console.log("filegroup",this.filegroup);
      this.modal1=true;
   },

  download1(name) {
    var url="http://127.0.0.1:8080/email/downloadAttachment?account="+this.CurrentUser+"&filename="+name;
    window.open(url);
  }
}
}
</script>

<style scoped>

</style>
